<template>
	<view>
		<u-popup :show="show">
			<view class="main">
				<view class="headerbox">
					<view class="text">图片示例</view>
					<u-icon name="close" color="#000" size="24" @click="show = false"></u-icon>
				</view>
				<u-line></u-line>
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="scroll-view-item uni-bg-red">
						<view v-for="(item,index) in dataList" :key="index">
							<view class="title">{{item.title}}</view>
							<view class="detail" v-for="(deItem,deIndex) in item.details">{{deItem}}</view>
							<view class="imgBox">
								<view v-for="(imgItem,imgIndex) in item.image" :key="imgIndex">
									<image :src="imgItem" />
								</view>
							</view>
							<view class="imgBox">
								<view class="imgText">正确示例</view>
								<view class="imgText">错误示例</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				dataList: [{
						title: '1.选择白天光线好时拍摄效果更佳',
						image: [
							'https://img.js.design/assets/img/64352bedc0d8fe1c81df6de9.png#2564006c6a173ee6ced40003ecaa4d7e',
							'https://img.js.design/assets/img/643520149ab1ac90db559778.png#18d2fe56127e70486318a35b53c2620b'
						],
						details: []
					},
					{
						title: '2.拍好正面照',
						image: [
							'https://img.js.design/assets/img/643524faceb6d50856206cb3.png#56be2f78fbc2b11c452073f888800a14',
							'https://img.js.design/assets/img/643528ee22583ba687d72248.png#591c20d8ff364c701e02b8e417bec57a'
						],
						details: [
							'门面、招牌尽量完整', "保持水平，让铺面撑满画面"
						]
					},
					{
						title: '3.拍好侧面照',
						image: [
							'https://img.js.design/assets/img/64352f0734afde421de95724.png#3acdc19c62a109017458e7f32a7e52c2',
							'https://img.js.design/assets/img/64352759ec8c57e316e31fd0.png#302ea320ea52abca0f0bbedaba4e83b2'
						],
						details: [
							'45度侧面照片，看到2-3 家商铺完整招牌为佳',
							'照片清晰，比例尽量一致'
						]
					},

				]
			}
		}
	}
</script>

<style>
	.main {
		padding: 20rpx;
	}

	.headerbox {
		display: flex;
		justify-content: space-between;
		margin-bottom: 50rpx;
	}

	.headerbox .text {
		font-size: 18px;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}

	.title {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		text-align: left;
		margin: 20rpx 0;
	}

	.detail {
		font-size: 16px;
		font-weight: 400;
		color: rgba(128, 128, 128, 1);
		text-align: left;
		margin: 10rpx 0;
	}

	.detail::before {
		content: '*';
		color: rgba(252, 8, 8, 1);
	}

	.imgBox {
		display: flex;
		justify-content: space-between;
	}

	.imgBox image {
		width: 165px;
		height: 115px;
		border-radius: 15rpx;
		margin: 20rpx 0;
	}

	.imgBox .imgText {
		width: 165px;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(56, 56, 56, 1);
	}

	.scroll-Y {
		height: 800rpx;
	}

	.scroll-view-item {
		height: 800rpx;
	}
</style>